<template>
	<view class="house-list">
		<view class="house-item" @click="goDetail(item._id)" v-for="item in houseList" :key="item._id">
			<image class="house-img" :src="item.imgUrl" mode=""></image>
			<view class="house-info">
				<view class="title">{{item.title}}</view>
				<view class="description">{{item.areaNum}}m² {{item.localName}} {{item.houseType}}</view>
				<view class="price"> {{item.unitPrice}}元/m²</view>
				<view class="localtype">{{item.localType}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const houseList = ref([])
	const houseObj = uniCloud.importObject('reservationHouse')
	const getData = async () => {
		const res = await houseObj.getData()
		houseList.value = res
	}
	getData()
</script>

<style scoped lang="scss">
	.house-list {
		padding: 0 20rpx;

		.house-item {
			display: flex;
			height: 150rpx;
			width: 100%;
			margin: 20rpx 0;

			.house-img {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}

			.house-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.title {
					font-weight: bold;
				}

				.description {
					font-size: 28rpx;
					color: #aaa;
				}

				.price {
					font-size: 26rpx;
				}

				.localtype {
					display: inline;
					background: #ccc;
					font-size: 24rpx;
					border-radius: 8rpx;
					text-align: center;
					width: 80rpx;
					color: #fff;
				}
			}
		}
	}
</style>